<script lang="ts" setup>
import * as echarts from "echarts";
import pageVue from "/src/lib/lay/page.vue";
import control from "/src/lib/action/control.vue";
import { reactive, onMounted } from "vue";
import { IDCardNumber, CarId, isNull, phone, Number } from '/src/lib/encrypt/editRules.ts'
import { $ } from "../../../../lib/request";
const date = "2021年11月15日";
const money = "500";

const gridOptions = reactive({
  border: true,
  resizable: false,
  height: 530,
  rowId: "id",
  checkboxConfig: {
    reserve: true,
  },
  pagerConfig: {
    pageSize: 10,
  },
  editConfig: { trigger: "click", mode: "row", enabled: true },
  editRules: {
    nickname: CarId,
    IDCardNumber: IDCardNumber,
  },
  columns: [
    {
      type: "checkbox",
      width: 50,
    },
    { field: "id", title: "订单号" },
    {
      field: "createTime",
      title: "时间",
      showOverflow: true,
    },
    {
      field: "carCard",
      title: "车牌 ",
      showOverflow: true,
    },
    {
      field: "materialName",
      title: "物料名称",
      filters: [
        { label: "精品", value: "精品" },
        { label: "普料", value: "普料" },
        { label: "固废", value: "固废" },
      ],
      filterMultiple: false,
      showOverflow: true,
    },
    {
      field: "grossWeight",
      title: "毛重",
      showOverflow: true,
    },
    ,
    {
      field: "tareWeight",
      title: "皮重",
      showOverflow: true,
    },

    {
      field: "netWeight",
      title: "净重",
      showOverflow: true,
    },
    {
      field: "grossWeight",
      title: "毛重",
      showOverflow: true,
    },
    {
      field: "suppliers",
      title: "供货单位",
      showOverflow: true,
    },

    {
      field: "materialPrice",
      title: "单价",
      showOverflow: true,
    },
  ],
  proxyConfig: {
    seq: true, // 启用动态序号代理（分页之后索引自动计算为当前页的起始序号）
    props: {
      result: "result",
      total: "page.total",
    },
    ajax: {
      // 接收 Promise
      query: ({
        page: { currentPage, pageSize },
        ...arg
      }: {
        page: {
          currentPage: number;
          pageSize: number;
        };
      }) => {
        // 筛选无法触发这里，导致只能筛选已获取到的数据
        console.log('else arg:', arg);

        return new Promise((resolve) => {
          $.get("/oa/saas/material/ylllcx.do", {
            params: {
              pageSize: pageSize,
              pageIndex: currentPage - 1,
            },
          }).then(
            ({
              data: {
                data: { total, MaterialList },
              },
            }: {
              data: {
                data: {
                  total: number;
                  MaterialList: Array<{
                    carCard: "浙A15315";
                    materialName: "机制砂";
                    amount: 516561;
                    grossWeight: 111;
                    netWeight: 111;
                    suppliers: "阿森纳就集团";
                    createTime: 1642665365000;
                    id: "1";
                    tareWeight: 111;
                    materialPrice: 1551;
                  }>;
                };
              };
            }) => {
              const list: any[] = [...MaterialList];
              resolve({
                page: {
                  total: total,
                },
                result: list,
              });
            }
          );
        });
      },
    },
  },
});
let option1 = {
  color: ["#6DD993"], // 横坐标
  xAxis: [
    {
      type: "category",
      data: [
        "一月",
        "二月",
        "三月",
        "四月",
        "五月",
        "六月",
        "七月",
        "八月",
        "九月",
        "十月",
        "十一月",
        "十二月",
      ],
      axisLabel: {
        fontSize: 16,
        interval: 0,
        margin: 12,
      },
      axisTick: {
        show: false,
      },
    },
  ],
  // 纵坐标
  yAxis: [
    {
      type: "value",
      name: "销售额",
      min: 0,
      interval: 60,
      axisLabel: {
        show: true,
        interval: "auto",
        formatter: "{value} 万",
        color: "#CCCCCC",
        fontSize: 18,
      },
      nameTextStyle: {
        fontSize: 18,
        color: "#5D5D5D",
        padding: [0, 0, 8, 5],
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "#DDDDDD",
          type: "solid",
          width: 1,
        },
      },
    },
  ],
  series: [
    {
      data: [1, 2, 3, 4, 70, 110, 130, 150, 80, 70, 110, 130],
      type: "bar",
    },
  ],
};
const option2 = {
  tooltip: {
    trigger: "item",
  },

  series: [
    {
      name: "来料量统计",
      type: "pie",
      color: ["#6DD993", "#F0FAF2","#6DD900"],
      radius: "50%",
      data: [
        { value: 750, name: "本月精品量" },
        { value: 250, name: "本月固废量" },
        { value: 250, name: "本月普料量" },
      ],
      avoidLabelOverlap: false,
      label: {
        formatter: "{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ",
        backgroundColor: "#F0FAF2",

        borderRadius: 4,
        rich: {
          a: {
            color: "#6E7079",
            lineHeight: 22,
            align: "center",
          },
          hr: {
            width: "100%",
            height: 0,
          },
          b: {
            color: "#4C5058",
            fontSize: 14,
            fontWeight: "bold",
            lineHeight: 33,
          },
          per: {
            color: "#fff",
            backgroundColor: "#4C5058",
            padding: [3, 4],
            borderRadius: 4,
          },
        },
      },

      emphasis: {
        itemStyle: {
          shadowBlur: 5,
          shadowOffsetX: 0,
          shadowColor: "rgba(0, 0, 0, 0.1)",
        },
      },
      labelLine: {
        show: false,
      },
    },
  ],
};
onMounted(() => {
  $.get("oa/saas/material/lljetjb.do", { params: {} }).then((respose) => {
    option1.series[0].data = respose?.data?.data
    loaderCircle2();
  });
  $.get("oa/saas/material/llltjt.do", { params: {} }).then((respose) => {
    console.log("原料来料量统计图", respose.data.data);
    const { btpl, byjp, bngf, btjp, bnpl, bygf, bnjp, bypl, btgf } = respose.data.data as any

    const thisData = option2.series[0].data;
    [byjp, bygf, bypl].forEach((item, index) => {
      thisData[index].value = item
    })
    loaderCircle3();
  });


});

const loaderCircle2 = async () => {
  const chartDom: HTMLElement = document.getElementById("main") as HTMLElement;
  // chartDom.setAttribute("_echarts_instance_", "");
  var myChart = echarts.init(chartDom);
  myChart.setOption(option1);
};
const loaderCircle3 = async () => {
  const chartDom: HTMLElement = document.getElementById("main2") as HTMLElement;
  // chartDom.setAttribute("_echarts_instance_", "");
  var myChart = echarts.init(chartDom);
  myChart.setOption(option2);
};
</script>
<template lang="pug">
pageVue
  template(v-slot:top)
    .hjk
      .topp 东阳世展新型建材有限公司产品来料统计表
        vxe-grid(v-bind="gridOptions"   highlight-hover-row  style="margin-top: 20px;" )
      .bot
        button.bott( style="margin-right: 13px;") 打印
        button.bott() 导出
  template(v-slot:bottom)
    .hjk2 
      .leftt 
        #main
      .rightt 
        #main2
</template>
<style lang="scss" scoped>
.hjk {
  position: relative;
  display: grid;
  gap: 20px;
  padding: 48px;
}
.topp {
  font-size: 20px;
  font-weight: bold;
  line-height: 20px;
  color: #5d5d5d;
}

.mid {
  font-size: 18px;
  color: #5d5d5d;
  font-weight: bold;
}
.bot {
  bottom: 76px;
  left: 54px;
  position: absolute;
  text-align: center;
  margin-bottom: -20px;
  .bott {
    text-align: center;
    text-decoration: none;
    display: inline-block;
    min-width: 87px;
    height: 34px;
    background: #f0faf2;
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.16);
    border-radius: 10px;
    font-size: 18px;
    line-height: 34px;
    color: #5d5d5d;
    border: none;
    cursor: pointer;
  }
}
.hjk2 {
  display: flex;
  .leftt {
    width: 50%;
    #main {
      width: 100%;
      height: 340px;
    }
  }
  .rightt {
    width: 43%;
    #main2 {
      width: 100%;
      height: 340px;
    }
  }
}
</style>
